<template>
  <div class="manageWorkbench">
    <workbench-page-design :isDesign="2" :isProd="2" id="1766996409004392450" />
  </div>
</template>

<script setup lang="ts" name="WORKBENCHMANAGEWORKBENCH">
import WorkbenchPageDesign from "../../system/sysworkbenchinfo/workbenchPageDesign/index.vue";
</script>

<style lang="scss" scoped>
.manageWorkbench {
  // background-image: url(../../../assets/images/pageBg.png);
  background-color: #000;
  overflow: auto;
  min-height: 100%;
  :deep(.el-card) {
    background-color: transparent;
    border: none;
    .el-card__header {
      background: rgba(212, 219, 249, 0.1);
      border-bottom: none;
    }
  }
}
:deep(.el-button + .el-button) {
  background: rgba(38, 49, 141, 0.3) !important;
  border: none;
  color: #fff;
}
:deep(.produceCard) {
  max-height: calc(100vh - 168px - 80px);
  overflow-y: auto;
  background-color: rgba(38, 49, 141, 0.3) !important;
  border: none !important;
}
:deep(li) {
  border: none !important;
  box-shadow: none;
  background-image: url(../../../assets/images/bg3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .title-inner {
    top: 14px !important;
    left: 33% !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    background: linear-gradient(180deg, #1dfcff 0%, #189bff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  .el-input__inner {
    color: #fff;
  }
}
:deep(.vue-grid-layout) {
  height: calc(100vh - 104px) !important;
}
:deep(.vue-grid-item) {
  height: 100% !important;
  transform: translate3d(10px, 0px, 0px) !important;
}
:deep(.el-table td.el-table__cell div) {
  color: rgba(172, 185, 227, 1) !important;
}
:deep(.el-table th.el-table__cell) {
  color: rgba(255, 255, 255, 0.3) !important;
}
:deep(.produce-c-title),
:deep(.card-title) {
  color: #fff !important;
  font-weight: 300;
}
:deep(.numberFont) {
  font-weight: 600;
}
:deep(.produceTitle) {
  .title {
    .title-text {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 44.7998046875%,
        #68c9f7 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
:deep(.card-content) {
  .card-left {
    .pic-type {
      margin-top: 15px !important;
    }
    .card-value {
      span:nth-child(1) {
        color: rgb(160, 230, 3) !important;
      }
      span:nth-child(2) {
        color: rgb(0, 229, 255) !important;
      }
    }
  }
  .card-right {
    height: 100% !important;
    padding: 0 !important;
  }
  .card-name {
    border: 1px solid rgba(27, 60, 105, 1) !important;
    background-color: rgba(172, 185, 227, 0.05) !important;
    padding: 5px 0 !important;
    span:nth-child(2) {
      color: #fff !important;
    }
  }
  .card-name:nth-child(1) {
    span:nth-child(1) {
      color: rgb(2, 216, 249);
    }
  }
  .card-name:nth-child(2) {
    span:nth-child(1) {
      color: rgb(233, 188, 40);
    }
  }
  .card-name:nth-child(3) {
    span:nth-child(1) {
      color: rgb(110, 197, 46);
    }
  }
}
</style>
